<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
   
</head>
 <link rel="stylesheet" type="text/css" href="css/wu.css" />
 <link rel="stylesheet" type="text/css" href="css/icon.css" />
 	<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="themes/icon.css">
	<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.serializejson.min.js"></script>
	
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<body>

<div class="easyui-layout" data-options='fit:true'>
        <div data-options="region:'north'" style="height:50px">
        	   <a href="#" id='addbtn' class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加新闻</a>
        		<a href="#" id='removebtn' class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除多个</a>
        		
        <input class="easyui-searchbox" data-options="prompt:'Please Input Value',searcher:doSearch" style="width:30%">
  

        </div>
        <div data-options="region:'west',split:true" title="新闻" style="width:300px;">
        	<ul id="tt"></ul>
        	
        </div>
        <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
			<table id="dg"></table>
			    <div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed:true" style="width:400px;height:250px;padding:10px">
			    	
        		
        	<form id="ff" method="post" style="width: 400px;">
        		<div style="margin-bottom:20px">
                <input class="easyui-textbox" name="_id" style="width:80%" data-options="label:'ID'">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="title" style="width:80%" data-options="label:'标题',required:true">
            </div>
			
			<div style="margin-bottom:20px">
			                <input class="easyui-textbox" name="desc" style="width:80%;height:60px" data-options="label:'新闻内容:',multiline:true">
			            </div>

        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
        </div>
    </div>
        		
        		
    </div>
        </div>
    </div>
    <script type="text/javascript">
	var cateId=null;
	$('#tt').tree({
    url: 'http://localhost:3000/newscate/list/0',
    method:'get',
    onClick: function(node){
    	
    	cateId=node._id
    	 console.log(cateId)
    		$('#dg').datagrid({
    			queryParams:{
			    	cateId:cateId
			    }
			    }).datagrid('reload');
			    
			   
		 // alert node text property when clicked
	}
});

	$('#dg').datagrid({
    url:'http://localhost:3000/news/list',
    method:'post',
//	fit:true,
    pagination:true,
    
    queryParams:{
    	cateId:cateId
    },
//  border:false,
//	pageSize:5,
//	pageList:[5,10,15,20],
    columns:[[
    	{field:'ck',title:'复选',checkbox:true},
        {field:'title',title:'新闻标题',width:100},
        {field:'date',title:'发布时间',width:150},
        {field:'desc',title:'新闻内容',width:300},
         {field:'caozuo',title:'操作',width:80,
        formatter:function(val,row,index){
        	return "<a onclick=deleteData('"+row._id+"')>删除</a> &nbsp;&nbsp;<a onclick=editData('"+row._id+"')>修改</a>"
        }
        }
    ]]
});		
			
	$('#addbtn').click(function(){
	 $('#ff').form('clear');
		if (cateId===null) {
			 $.messager.show({
                title:'信息提示',
                msg:'请选择新闻分类，否则无法添加新闻',
                timeout:3000,
                showType:'show',
                style:{
								right:'',
								top:document.body.scrollTop+document.documentElement.scrollTop,
								bottom:''
							}
            });
		}else{
			$('#dlg').dialog('open') 
		}
	})
	
function submitForm(){
	      
	   		var postDate=$('#ff').serializeJSON();
	   		  var putId=postDate._id;
	   		postDate.cateId=cateId;
	   		if (postDate._id.length>0) {
	   			delete postDate.cateId;
	   				$.ajax({
	   			type:"put",
	   			url:"http://localhost:3000/news/data/"+putId,
	   			data:postDate,
	   			async:true
	   		}).done(function(res){
	   			$.messager.show({
	   				title:'信息提示',
	   				msg:"数据修改成功",
	   				timeout:3000,
	   				showType:'show'
	   			});
	   			$('#dlg').dialog('close');
	   			$('#dg').datagrid('reload');
	   				
	   		})
	   		}else{
	   			delete postDate.cateId;
	   			delete postDate._id;
			   				$.ajax({
			   			type:"post",
			   			url:"http://localhost:3000/news/data",
			   			data:postDate,
			   			async:true
			   		}).done(function(res){
			   			$.messager.show({
			   				title:'信息提示',
			   				msg:"数据添加成功",
			   				timeout:3000,
			   				showType:'show'
			   			});
			   			$('#dlg').dialog('close');
			   			$('#dg').datagrid('reload');
			   				
			   		})
	   		}
	   		
	   		
	   	
	   		}
//          $('#ff').form('submit',onsubmit:function(e){
//          	if($('this').form('enableValidation').form('vilidate')){
//          		
//          	}
//          });
//      }
        function clearForm(){
            $('#ff').form('clear');
        }
	
	
	
	function deleteData(id){
		
		 $.messager.confirm('确认删除', '你确定删除吗?', function(r){
                if (r){
                    $.ajax({
			type:'delete',
			url:"http://localhost:3000/news/data/"+id,
			async:true
		
		}).done(function(res){
			$('#dg').datagrid('reload')
		})
                }
            });
		
		
	}
	
	
	function editData(id){
		
		 $.ajax({
			type:'get',
			url:"http://localhost:3000/news/data/"+id,
			async:true
		
		}).done(function(res){
			
			$('#ff').form('load',res);
			$('#dlg').dialog('open')
		})

		
	}
	
	$('#removebtn').click(function(){
		var rows=$('#dg').datagrid('getSelections');
		
		if (rows.length>0) {
			var ids=[];
			rows.forEach(function(item,idx){
				ids.push(item._id)
			})
			 $.ajax({
			type:'post',
			url:"http://localhost:3000/news/data/removes",
			data:{
				ids:ids.toString()
			},
			async:true
		
		}).done(function(res){
			
			
			$('#dg').datagrid('reload')
			
		})
			
		}
	})
	function doSearch(value){
		$('dg').datagrid({
			queryParams:{
				cateId:cateId,
				title:value
			}
		}).datagrid('reload');
		
	}
</script>
</body>

</html>